<template>
  <div class="form-container">
    <van-form @submit="submitForm">
      <van-nav-bar
        left-text="返回"
        @click-left="$router.back()"
        fixed
        title="车辆信息"
      />
      <div class="title-padding"></div>
      <van-field
        v-model="carData.num"
        label="车牌号"
        required
        :rules="[{ required: true, message: '请填写车牌号' }]"
      ></van-field>
      <van-field v-model="carData.brand" label="品牌"></van-field>
      <!-- <van-field v-model="carData.type" label="类型"></van-field> -->
      <van-field name="radio" label="类型">
        <template #input>
          <van-radio-group v-model="carData.type" direction="horizontal">
            <van-radio name="小型">小型</van-radio>
            <van-radio name="中型">中型</van-radio>
            <van-radio name="大型">大型</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        v-model="carData.color"
        label="颜色"
        required
        :rules="[{ required: true, message: '请填写车辆颜色' }]"
      ></van-field>
      <van-field v-model="visitorData.visitorName" label="车主姓名"></van-field>
      <van-button class="submitBtn" type="primary" round native-type="submit"
        >提交</van-button
      >
      <van-button class="backBtn" type="danger" round @click="returnBack"
        >返回</van-button
      >
    </van-form>
  </div>
</template>

<script>
/* eslint-disable */
import { getLocal } from "@/utils";
import { car_page, car_update, car_add } from "@/api";
import { Toast } from "vant";
export default {
  name: "car-page",
  data() {
    return {
      carData: {
        id: undefined,
        num: "", // 车牌号
        brand: "", // 品牌
        type: "", // 类型
        color: "", // 颜色
      },
      visitorData: {},
      isUpdate: false, // 判断是修改还是新增
    };
  },
  methods: {
    async submitForm() {
      const payload = { ...this.carData, ...this.visitorData };
      if (this.isUpdate) {
        console.log("payload", payload);
        const res = await car_update(this.carData);
        if (res.code == 0) {
          Toast.success("修改成功");
        }
      } else {
        delete payload.id;
        console.log("payload", payload);
        const res = await car_add(payload);
        Toast.success("添加成功");
      }
      this.$router.push("user");
    },
    returnBack(e) {
      e.preventDefault();
      this.$router.back();
    },
    getDetail() {
      const visitorData = getLocal("visitorData");
      this.visitorData.visitorId = visitorData.id;
      this.visitorData.visitorName = visitorData.name;
    },
    async carPage() {
      const res = await car_page({
        visitorId: this.visitorData.visitorId,
      });
      if (res.code == 0 && res.data.list.length > 0) {
        this.carData = res.data.list[0];
        this.isUpdate = true;
      }
    },
  },
  created() {
    this.getDetail();
    this.carPage();
  },
  watch: {
    $route(to, from) {
      if (to.path == "/car") {
        this.getDetail();
        this.carPage();
      }
    },
  },
};
</script>

<style scoped>
.title-padding {
  padding-top: 5vh;
}
.form-container {
  padding: 0 10px;
  background: #f5f5f5;
  height: 100vh;
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}

.submitBtn {
  margin-left: 28vw;
  margin-top: 1vh;
  /* display: flex;
  justify-content: center; */
}
.backBtn {
  margin-left: 2vw;
}
</style>
